<template>
	<view>
		<view class="bg"></view>
		<view class="wrap">
			<!-- <view class="title">银行卡</view> -->
			<view class="title">金额<text style="font-weight: bold;font-size: 30rpx;padding-left: 30rpx;">￥{{(Number(data.house_deposit)).toFixed(2)}}</text></view>
			<view class="card" v-if="data">
				<view class="card-info u-flex">
					<!-- <image src="/static/images/房源图片@2x.png"></image> -->
					<text>{{data.payType.accountname}}</text>
				</view>
				<view class="card-code u-flex">
					<view class="tit">卡号：</view>
					<view class="card-no">{{data.payType.account}}</view>
				</view>
				<view class="card-user u-flex">
					<view class="tit">账户名</view>
					<view class="name">{{data.payType.username}}</view>
				</view>
			</view>
			
			<view class="pay-btn">
				<u-button type="primary" @click="show = true" shape="circle">我已支付</u-button>
			</view>
			<view class="tips-text">*银行卡支付需要后台审核，付款时间以后台确认收款为准。</view>
		</view>
		
		<u-modal v-model="show" show-cancel-button confirm-text="我已付款" confirm-color="#ff3737" @confirm="pay()" title="请上传付款凭证">
			<view class="upload u-flex">
				<u-upload @on-list-change="changeed" :action="action" name="file" :header="{token:token}" max-count="1"></u-upload>
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				data:'',
				action:'',
				pay_image:''
			}
		},
		methods: {
			pay(){
				if(!this.pay_image.length){this.$u.toast('请上传付款凭证');return}
				this.$u.post('/api/user/payDeposit',{
					build_type:this.data.type,//类型 新房二手房...
					house_id:this.data.id,
					status:this.data.types === '1' ? 1 : 2, //1意向金，2定金
					admin_housekeeper_id:this.data.ids,//管家
					price:this.data.house_deposit,
					pay_method:this.data.payType.id,//支付方式id
					pay_image:this.pay_image.toString()
				}).then(res=>{
					this.jump('/pages/house/pay/pay-success',!0)
				})
			},
			changeed(lists,name){
				if(lists.every(item=>item.response)){
					this.pay_image = lists.map(i=>i.response.data.fullurl)
				}
			}
		},
		onLoad({data}) {
			this.action = this.$u.api.uploadUrl()
			this.data = JSON.parse(decodeURIComponent(data))
		}
	}
</script>

<style lang="scss">
	.bg{position: relative;background-color: $tc;height: 300rpx;border-radius: 0 0 50rpx 50rpx;}
	.wrap{
		padding: 0 50rpx;position: absolute;left: 0;top: 0;width: 100%;
		.title{color: #fff;font-size: 30rpx;padding: 50rpx 0 30rpx 0;}
		.card{padding: 40rpx;border-radius: 20rpx;color: #fff;background-color: #ff3737;
			.card-info{
				image{width: 76rpx;height: 76rpx;display: block;margin-right: 20rpx;flex-shrink: 0;border-radius: 50%;}
				text{font-weight: bold;font-size: 32rpx;}
			}
			.card-code{
				justify-content: space-between;font-size: 30rpx;padding-top: 20rpx;
				.tit{white-space: nowrap;color: #eee;}
			}
			.card-user{
				.tit{margin-right: 20rpx;}
				justify-content: space-between;padding-top: 20rpx;
			}
		}
		.pay-btn{padding-top: 100rpx;}
	}
	
	.upload{justify-content: center;padding: 20rpx 0;}
	.tips-text{color: #666;font-size: 26rpx;padding-top: 30rpx;text-align: justify;}
</style>
